@mixin link-hover($link-color, $percent) {
    color: $link-color;
    &:hover {
        color: darken($link-color, $percent);
        transition: color .35s ease;
    }
}

@mixin color-border() {
    &:nth-of-type(7n+1){
        border-left: 5px solid $red;
    }
    &:nth-of-type(7n+2){
        border-left: 5px solid $green;
    }
    &:nth-of-type(7n+3){
        border-left: 5px solid $blue;
    }
    &:nth-of-type(7n+4){
        border-left: 5px solid $yellow;
    }
    &:nth-of-type(7n+5){
        border-left: 5px solid $violet;
    }
    &:nth-of-type(7n+6){
        border-left: 5px solid $orange;
    }
    &:nth-of-type(7n+7){
        border-left: 5px solid $indigo;
    }
}

@mixin basic-box($box-bg) {
    background: $box-bg;
    border: $basic-border;
    @include radius($global-radius);
}
@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
